Tabla

Tabla UI - Celdas y Estructura

El componente de tabla en Emvi UI permite estructurar información tabular con alta densidad de datos, conservando claridad visual y consistencia semántica. Soporta diseño responsivo, scroll horizontal y alineación precisa entre columnas y encabezados.

Celdas de Tabla

Cada table cell (<td> y <th>) está optimizada para albergar contenido textual, íconos, botones u otros componentes del sistema. Las celdas pueden personalizarse en alineación (start, center, end), densidad, borde y estilo de fondo según jerarquía visual.

Estructura Semántica

La tabla está construida usando HTML semántico (<table>, <thead>, <tbody>, <tr>, <th>, <td>), con compatibilidad completa para atributos de accesibilidad (scope, aria-sort, role="columnheader", etc.).

Modos de Visualización

Se admiten variantes como: Tabla compacta, Tabla con zebra striping, Tabla con scroll horizontal, Tabla responsiva en bloques para móvil.

Integración y Estilo

Cada parte de la tabla está disponible como componente reutilizable en Figma y con clases utilitarias de Tailwind. Puedes combinar celdas con tags, botones, badges o chips para enriquecer la interacción sin sacrificar estructura.